<script setup>
import { computed } from "vue";
import { useMsg } from "@/store/useMsg";

const props = defineProps({
  orderDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  goodsDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const msgStore = useMsg();
// 计算订单支付剩余时间
const paymentRemainingTime = computed(() => {
  const remainingTime = props.orderDetails.remainingTime;
  const expireDate = new Date(remainingTime);
  const now = new Date();
  const diff = expireDate.getTime() - now.getTime();
  if (diff < 0) {
    return "订单已过期";
  }
  // 小时
  const hours = Math.floor(diff / 3600000);
  // 分钟
  const minutes = Math.floor((diff % 3600000) / 60000);
  // 秒
  const seconds = Math.floor((diff % 60000) / 1000);
  return `${hours}小时${minutes < 10 ? "0" + minutes : minutes}分`;
});

// 邀请支付
const handleInvitePay = () => {
  msgStore.sendMessage(
    "chatMsg",
    {
      content: "邀请支付",
      to: props.orderDetails.uimKey,
      contentType: 10,
      exData: {
        orderDetails: props.orderDetails,
        goodsDetails: props.goodsDetails,
      },
    },
    (res) => {
      console.log("邀请支付res", res);
    }
  );
};
</script>

<template>
  <div class="status">
    <img class="icon" src="@/assets/order-time-icon.png" alt="" />
    <div class="info">
      <h3 class="title">
        等待买家付款 <span>支付剩余时间：{{ paymentRemainingTime }}</span>
      </h3>
      <p class="confirm-list">
        该订单会保留2小时（从创建之日算起），2小时之后如果还未付款，系统将自动关闭该订单。
      </p>
      <p class="btn" v-if="paymentRemainingTime !== '订单已过期'">
        <el-button :loading="loading" @click="handleInvitePay"
          >邀请支付</el-button
        >
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.status {
  display: flex;
}
.icon {
  flex: 0 0 24px;
  height: 24px;
  margin-right: 8px;
  position: relative;
  top: 2px;
}
.info {
  flex: 1;
  .title {
    font-size: 20px;
    color: #191e28;
    margin-bottom: 12px;
    span {
      padding: 4px 12px;
      background: rgba(255, 79, 79, 0.08);
      border-radius: 12px 12px 12px 12px;
      font-size: 14px;
      color: #ff4f4f;
      margin-left: 16px;
    }
  }
  .confirm-list {
    color: rgba(25, 30, 40, 0.48);
    line-height: 24px;
  }
  .btn {
    margin-top: 16px;
    button {
      width: 180px;
      height: 48px;
      background: #1dbf73;
      border-radius: 8px 8px 8px 8px;
      border: none;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      &:nth-child(2) {
        background: #ffffff;
        color: rgba(25, 30, 40, 0.6);
        border: 1px solid rgba(25, 30, 40, 0.08);
        margin-left: 16px;
      }
    }
  }
}
</style>